<template>
    <div class="container" data-reactroot="">
      <div class="login-continer">
        <div class="login-header">
          <div><a href="https://app.dxy.cn/index.htm" target="_blank" class="download dot" rel="">
            <svg class="icon icon-ic_navbar_download download-icon" aria-hidden="true">
  <!--            <use xlink:href="#icon-ic_navbar_download"></use>-->
              <!-- <el-icon><Search /></el-icon> -->
            </svg>
            下载 App</a></div>
          <a href="https://dxcare.cn/article/185161" target="_blank" class="identify" rel="">栏目收费说明</a>
          <div class="before-login" v-if="!username">
            <div class="before-login-login dot">
              <svg class="icon icon-ic_navbar_login user-icon" aria-hidden="true">
                <use xlink:href="#icon-ic_navbar_login"></use>
              </svg>
              <router-link to="/login">请登录</router-link>
            </div>
            <router-link to="/res"><div class="before-login-register ">注册</div></router-link>
          </div>
          <div v-else>
            <div class="login-header-spar">
                <img :src="avatar" alt="用户头像" style="height: 40px; width: 40px;" >

                <span >{{ username }}</span>

                <span @click="logout">退出登录</span>
            </div>
          </div>
        </div>
      </div>
      <div class="home-header">
        <div class="home-header-container">
          <div class="home-logo">
            <div class="logo-icon"></div>
          </div>
          <div class="search-input-container">
            <svg class="icon icon-ic_search search-icon" aria-hidden="true">
              <use xlink:href="#icon-ic_search"></use>
  
            </svg>
  <!--          <el-icon><Search /></el-icon>-->
            <input type="text" value="" class="search-input" placeholder="文章/疾病/医生/药品/医院">
              <el-icon name="search"></el-icon>
            <button type="button" class="search-input-button">搜索</button>
          </div>
          <div class="home-banner"><a href="/i_doctor" target="_self" class="banner-left" rel="">
            <div class="banner-left-title">问医生</div>
            <div class="banner-left-sub">三甲主治在线</div>
          </a>
            <div class="banner-right">
              <a href="/disease" target="_self" class="banner-right-item" rel="">
              <div class="item-info">
                <div class="item-info-title">查疾病</div>
                <div class="item-info-sub">权威疾病百科</div>
              </div>
              <svg class="icon icon-ic_homepage_disease item-img" aria-hidden="true">
                <use xlink:href="#icon-ic_homepage_disease"></use>
              </svg>
            </a>
              <a href="http://drugs.dxy.cn/" target="_self" class="banner-right-item" rel="">
              <div class="item-info">
                <div class="item-info-title">查药品</div>
                <div class="item-info-sub">药品信息大全</div>
              </div>
              <svg class="icon icon-ic_homepage_drug item-img" aria-hidden="true">
                <use xlink:href="#icon-ic_homepage_drug"></use>
              </svg>
            </a><a href="https://dxy.com/hospitals" target="_self" class="banner-right-item" rel="">
              <div class="item-info">
                <div class="item-info-title">查医院</div>
                <div class="item-info-sub">国内医院信息查询</div>
              </div>
              <svg class="icon icon-ic_homepage_hospital item-img" aria-hidden="true">
                <use xlink:href="#icon-ic_homepage_hospital"></use>
              </svg>
            </a><a href="https://dxy.com/surgerys" target="_self" class="banner-right-item" rel="">
              <div class="item-info">
                <div class="item-info-title">查检查/手术</div>
                <div class="item-info-sub">检查与手术专业百科</div>
              </div>
              <svg class="icon icon-ic_homepage_surgery item-img" aria-hidden="true">
                <use xlink:href="#icon-ic_homepage_surgery"></use>
              </svg>
            </a><a href="https://dxy.com/vaccines" target="_self" class="banner-right-item" rel="">
              <div class="item-info">
                <div class="item-info-title">查疫苗</div>
                <div class="item-info-sub">疫苗接种与禁忌</div>
              </div>
              <svg class="icon icon-ic_homepage_vaccine item-img" aria-hidden="true">
                <use xlink:href="#icon-ic_homepage_vaccine"></use>
              </svg>
            </a><a href="https://dxy.com/firstaids" target="_self" class="banner-right-item" rel="">
              <div class="item-info">
                <div class="item-info-title">急救指南</div>
                <div class="item-info-sub">急救知识百科查询</div>
              </div>
              <svg class="icon icon-ic_homepage_sos item-img" aria-hidden="true">
                <use xlink:href="#icon-ic_homepage_sos"></use>
              </svg>
            </a><a href="https://ask.dxy.com/index#/activity-share?activity_id=160" target="_self"
                   class="banner-right-item" rel="">
              <div class="item-info">
                <div class="item-info-title">测一测</div>
                <div class="item-info-sub">1分钟了解自己</div>
              </div>
              <svg class="icon icon-ic_homepage_test item-img" aria-hidden="true">
                <use xlink:href="#icon-ic_homepage_test"></use>
              </svg>
            </a><a href="https://dxy.com/videos" target="_self" class="banner-right-item" rel="">
              <div class="item-info">
                <div class="item-info-title">科普视频</div>
                <div class="item-info-sub">生活辟谣与科普</div>
              </div>
              <svg class="icon icon-ic_homepage_video item-img" aria-hidden="true">
                <use xlink:href="#icon-ic_homepage_video"></use>
              </svg>
            </a></div>
          </div>
        </div>
      </div>
      <div class="home-baike">
        <div class="home-baike-tabs">
          <div class="home-baike-tab active">
            <img src="https://img1.dxycdn.com/2020/0826/774/3342161694231262343-22.png" class="tab-image">
            <p @click="state.activeTab = 'dz'" :class="{ active: state.activeTab === 'dz' }">大众健康</p>
          </div>
          <div class="home-baike-tab">
            <img src="https://img1.dxycdn.com/2020/0826/410/2342161694231262343-22.png" class="tab-image">
            <p @click="state.activeTab = 'sh'" :class="{ active: state.activeTab === 'sh' }">生活手册</p>
          </div>
        </div>
        <div class="home-baike-body">
          <div class="home-baike-body-categorys">
            <div class="section-filter-box-common">
              <div class="section-filter-box-wrap normal" v-if="state.activeTab === 'dz'">
                <span v-for="(item,key) in info" :key="key">
                  <div class="tag-button">
                    <button :class="{'active': isActive}" @click="newsliat(item.id)">{{item.name}}</button>
                  </div>
                </span>
              </div>
                
              <!-- 另一个 -->
              <div class="section-filter-box-wrap normal" v-if="state.activeTab === 'sh'">
                <span v-for="(item,key) in ino" :key="key">
                  <div class="tag-button">
                    
                    <!-- <button @click="catelist(item.id)" class="">
                    </button> -->
                    <button type="success" plain @click="catelist(item.id)" class="">{{item.name}}</button>
                  </div>
                </span>
              </div>
            </div>
          </div>
          <div class="home-baike-body-tags" v-if="state.activeTab === 'dz'">
            <span v-for="(item,key) in indo" :key="key">
              <div class="abc">
                <router-link to="https://www.bilibili.com/">
                  <div class="home-baike-button-ali">
             
                    <li >· {{item.name}}</li>
                 
                  </div>
                </router-link>
              </div>
                </span>
          </div>
  
          <div class="home-baike-body-tags" v-if="state.activeTab === 'sh'">
            <span v-for="(item,key) in inno" :key="key">
              <div class="abc">
                <router-link to="https://www.bilibili.com/">
                  <div class="home-baike-button-ali">
             
                    <li >· {{item.name}}</li>
                 
                  </div>
                </router-link>
              </div>
                </span>
        </div>
  
        </div>
      </div>
      <div class="doctor-module">
        <div class="home-tabs">
          <div class="home-tabs-left">
            <div class="tab-item common-text-link active" v-for="(item,key) in daparlist.slice(0,9)"  :key="key" >{{ item.dname }}</div>
         
          </div>
          <router-link to="/dep" target="_blank" class="home-tabs-right common-text-link" rel="">
            <div class="right-title">全部科室</div>
          </router-link></div>
        <div class="doctor-container">
          <a href="https://ask.dxy.com/index#/find/user/147643" target="_blank" class="doctor-card common-card-link "
             rel="">
            <div class="doctor-card-avatar">
              <img src="https://img1.dxycdn.com/p/s157/2024/0613/156/0025194445271521081.jpg!wh200" alt="李锦"></div>
            <div class="high-light doctor-card-name-title">李锦 主治医师</div>
            <div class="doctor-card-hospital">南京大学医学院附属金陵医院</div>
            <div class="doctor-card-section">皮肤科</div>
            <div class="doctor-card-data">
              <div class="doctor-card-data-star">
                <svg class="icon icon-ic_rating" aria-hidden="true">
                  <use xlink:href="#icon-ic_rating"></use>
                </svg>
                <div class="doctor-card-data-star-text">5.00</div>
              </div>
              <div class="doctor-card-data-reply">615月回答</div>
            </div>
            <div class="doctor-card-ask">
              <div class="doctor-card-desc">
                擅长痤疮，皮肤美容，激光治疗，甲真菌病，足癣股癣，皮肤瘙痒，荨麻疹，带状疱疹，湿疹，疣，银屑病，性传播疾病等常见病诊治。
              </div>
              <button type="button" class="btn doctor-card-btn common-button-link">问医生 ¥<!-- --> 79</button>
            </div>
          </a><a href="https://ask.dxy.com/index#/find/user/1601173" target="_blank" class="doctor-card common-card-link "
                 rel="">
          <div class="doctor-card-avatar"><img
              src="https://img1.dxycdn.com/2023/0810/611/0426039975720359861-22.jpg!wh200" alt="兰婷"></div>
          <div class="high-light doctor-card-name-title">兰婷 主治医师</div>
          <div class="doctor-card-hospital">西安市第八医院</div>
          <div class="doctor-card-section">皮肤科</div>
          <div class="doctor-card-data">
            <div class="doctor-card-data-star">
              <svg class="icon icon-ic_rating" aria-hidden="true">
                <use xlink:href="#icon-ic_rating"></use>
              </svg>
              <div class="doctor-card-data-star-text">4.94</div>
            </div>
            <div class="doctor-card-data-reply">331月回答</div>
          </div>
          <div class="doctor-card-ask">
            <div class="doctor-card-desc">
              硕士研究生，第三军医大学西南医院学习工作多年，擅长痤疮、玫瑰痤疮、脂溢性皮炎等疾病。欢迎关注微博皮肤美容医生-兰婷。
            </div>
            <button type="button" class="btn doctor-card-btn common-button-link">问医生 ¥<!-- --> 129</button>
          </div>
        </a><a href="https://ask.dxy.com/index#/find/user/11147299" target="_blank" class="doctor-card common-card-link "
               rel="">
          <div class="doctor-card-avatar"><img
              src="https://img1.dxycdn.com/2022/1012/151/1215949690757676753-157.jpg!wh200" alt="谢立夏"></div>
          <div class="high-light doctor-card-name-title">谢立夏 主治医师</div>
          <div class="doctor-card-hospital">成都市第二人民医院</div>
          <div class="doctor-card-section">皮肤科</div>
          <div class="doctor-card-data">
            <div class="doctor-card-data-star">
              <svg class="icon icon-ic_rating" aria-hidden="true">
                <use xlink:href="#icon-ic_rating"></use>
              </svg>
              <div class="doctor-card-data-star-text">5.00</div>
            </div>
            <div class="doctor-card-data-reply">238月回答</div>
          </div>
          <div class="doctor-card-ask">
            <div class="doctor-card-desc">
              互联网问诊答疑10000+次，擅长各种皮肤病个体化治疗。硕士。发表学术论文十余篇，皮肤病治疗国家专利一项。
            </div>
            <button type="button" class="btn doctor-card-btn common-button-link">问医生 ¥<!-- --> 88</button>
          </div>
        </a><a href="https://ask.dxy.com/index#/find/user/1575406" target="_blank" class="doctor-card common-card-link "
               rel="">
          <div class="doctor-card-avatar"><img
              src="https://img1.dxycdn.com/2018/0509/927/3276709227523345983-22.jpg!wh200" alt="付继承"></div>
          <div class="high-light doctor-card-name-title">付继承 副主任医师</div>
          <div class="doctor-card-hospital">武汉大学人民医院</div>
          <div class="doctor-card-section">皮肤科</div>
          <div class="doctor-card-data">
            <div class="doctor-card-data-star">
              <svg class="icon icon-ic_rating" aria-hidden="true">
                <use xlink:href="#icon-ic_rating"></use>
              </svg>
              <div class="doctor-card-data-star-text">4.95</div>
            </div>
            <div class="doctor-card-data-reply">159月回答</div>
          </div>
          <div class="doctor-card-ask">
            <div class="doctor-card-desc">
              医学博士，副教授，国外皮肤病和性病临床学习一年，大型三甲医院一线临床专家。专注皮肤病和性病二十多年。
            </div>
            <button type="button" class="btn doctor-card-btn common-button-link">问医生 ¥<!-- --> 99</button>
          </div>
        </a></div>
      </div>
      <div class="content">
        <div class="content-title">
          <h2 class="content-title-text">大家都在问</h2>
          <a href="https://dxy.com/questions/" target="_blank" class="content-title-more common-text-link"
             rel="">查看更多
          </a>
        </div>
        <div class="content-info">
          <div class="question-module">
            <a href="https://dxy.com/question/108312109" target="_blank" class="question-card common-card-link" rel="">
              <div class="dialog-ask">
                <div class="common-avatar common-avatar-default" style="width:50px;height:50px">
                  <img src="https://img1.dxycdn.com/2020/0820/645/3457867446068541343-22.png" class="common-avatar-img">
                </div>
                <div class="high-light dialog-ask-content">
                  症状及患病时长：嗓子不舒服，咳嗽有一周左右，没有发烧鼻塞的症状，嗓子有痰咳不出来，发痒，疼痛。到了灰尘大的地方会咳的更厉害。
                  <br><br>就医及用药情况：服用了感康，吃了一顿阿莫西林<br><br>需要解答的问题：服药之后咳嗽并未缓解，需要换什么药？<br>
                </div>
              </div>
              <div class="dialog-answer">
                <div class="dialog-answer-avatar">
                  <div class="common-avatar common-avatar-default common-avatar-border" style="width:50px;height:50px">
                    <img src="https://img1.dxycdn.com/2022/0112/311/6452791988235906253-157.jpg"
                         class="common-avatar-img">
                  </div>
                </div>
                <div class="dialog-answer-body">
                  <div class="dialog-doctor-info">
                    <div class="high-light doctor-name">刘威鹏</div>
                    <div class="doctor-info">主治医师</div>
                    <div class="doctor-info">急诊科</div>
                    <div class="doctor-info">中山大学孙逸仙纪念医院</div>
                  </div>
                  <div class="high-light dialog-content">
                    您好，非常感谢您的提问和信任！由于线上问诊的局限性，仅能够提供医疗咨询服务，如有紧急情况，建议直接线下就诊，现在我正在详细
                    阅读您的问诊，请不要担心。稍后我会根据您的情况进一步向您提出一些问题，大概5-10分钟左右，稍后希望您尽可能完整回答。<br><br>⚠️
                    您总共有三次的提问机会，此条信息无需回复，以免浪费您追问机会，回复正在编辑中，请您稍候，再次感谢您的信任！另外，如果10分钟
                    内未能有效回复（可能有突发抢救或者手术）您如果比较着急，您可以直接联系客服申请退款，或者再次发送消息表明您比较着急，需要申
                    请退款，等我看到消息后我会直接为您申请。<br>☺️如果您可以等待，术后或者抢救结束，我会及时回复您，感谢您的理解🫶🏻
                  </div>
                  <div class="dialog-num">已帮助 <!-- -->3<!-- --> 人</div>
                </div>
              </div>
            </a><a href="https://dxy.com/question/108558684" target="_blank" class="question-card common-card-link"
                   rel="">
            <div class="dialog-ask">
              <div class="common-avatar common-avatar-default" style="width:50px;height:50px">
                <img src="https://img1.dxycdn.com/2020/0820/645/3457867446068541343-22.png" class="common-avatar-img">
              </div>
              <div class="high-light dialog-ask-content">
                症状及患病时长：2023年11月第一次出现癫痫发作，到乌鲁木齐医院做脑电图正常，到2024年4月又一次发作，到北京天坛医院，做视频脑
                电图，脑电图异常，开始吃左乙拉西坦，早晚各一片500mg，直至现在未发作，本月发现怀孕<br><br>就医及用药情况：2023年11月第一次
                出现癫痫发作，到乌鲁木齐医院做脑电图正常，到2024年4月又一次发作，到北京天坛医院，做视频脑电图，脑电图异常，开始吃左乙拉西坦
                ， 早晚各一片500mg，直至现在未发作，本月发现怀孕3周左右<br><br>需要解答的问题：妇科医生不建议吃药，呢么左乙拉西坦片是否正
                常吃， 以及是否有其他影响
              </div>
            </div>
            <div class="dialog-answer">
              <div class="dialog-answer-avatar">
                <div class="common-avatar common-avatar-default common-avatar-border" style="width:50px;height:50px">
                  <img src="https://img1.dxycdn.com/p/s157/2024/0101/393/2709942803155671471.jpg"
                       class="common-avatar-img">
                </div>
              </div>
              <div class="dialog-answer-body">
                <div class="dialog-doctor-info">
                  <div class="high-light doctor-name">胡颖</div>
                  <div class="doctor-info">主治医师</div>
                  <div class="doctor-info">神经科</div>
                  <div class="doctor-info">安徽医科大学第一附属医院绩溪路院区</div>
                </div>
                <div class="high-light dialog-content">你好，请稍等，我详细看一下你的资料，你先别回复以免浪费提问机会</div>
                <div class="dialog-num">已帮助 <!-- -->1<!-- --> 人</div>
              </div>
            </div>
          </a></div>
        </div>
      </div>
      <div class="content">
        <div class="content-title">
          <h2 class="content-title-text">科普文章</h2>
          <a href="https://dxy.com/articles" target="_blank" class="content-title-more common-text-link"
             rel="">查看更多</a>
        </div>
        <div class="content-info">
          <div class="articles-module">
            <div class="home-article-item">
              <div class="article-card">
                <div class="article-card-cover"><img
                    src="https://img1.dxycdn.com/p/s22/2024/0929/634/8237412840589120481.jpg!w720" alt="cover"
                    class="article-card-cover-img"></div>
                <div class="article-card-body">
                  <a href="https://dxy.com/article/197022" target="_blank" class="article-title" rel="">
                    <div class="high-light body-title common-text-link">以为在休息，实则让大脑变笨的 9 种行为</div>
                  </a>
                  <div class="high-light body-content">年纪变大，很多人会怀疑自己不中用了。上一秒还撺在手里的手机，下一秒翻遍了家里，
                    也想不起来放在了哪里；兴冲冲教小孩英语，你说一个apple，人问你那梨怎么说，你悻悻选择了闭嘴；至于吃个鸡腿，啃完骨头却把肉
                    丢进了垃圾桶这种事，就不说了，都不说了……一言以蔽之就是：咋回事？感觉自己越来越呆滞。图片来源：自己做的很不幸，大脑慢慢
                    变笨，可能不是你的错觉。学术顶刊《 Psychol Sci 》上一项研究表明
                  </div>
                </div>
              </div>
              <div class="link-line">
                <a href="https://dxy.com/article/197349" target="_blank"
                   class="link-line-title common-text-link" rel="">一个易致癌的做菜习惯，很多人每天都在犯！</a>
              </div>
              <div class="link-line">
                <a href="https://dxy.com/article/197309" target="_blank" class="link-line-title common-text-link" rel="">5
                  个无意识让血管越来越堵的行为，很多人都中招了</a>
              </div>
              <div class="link-line">
                <a href="https://dxy.com/article/197021" target="_blank" class="link-line-title common-text-link"
                   rel="">天天盯手机眼睛快废了？一个不花钱的方法还真有用</a>
              </div>
            </div>
            <div class="home-article-item">
              <div class="article-card">
                <div class="article-card-cover"><img
                    src="https://img1.dxycdn.com/p/s22/2024/0925/841/2910615836063288381.jpg!w720" alt="cover"
                    class="article-card-cover-img"></div>
                <div class="article-card-body"><a href="https://dxy.com/article/196905" target="_blank"
                                                  class="article-title" rel="">
                  <div class="high-light body-title common-text-link">很遗憾，「断崖式衰老」最可怕的，还不是让你变老、变丑
                  </div>
                </a>
                  <div class="high-light body-content">美国斯坦福大学的团队发表过一项研究，通过血浆蛋白的变化发现，人有三个骤然衰老的
                    节点，第一个发生在34岁。这一年，很多人会惊觉自己好比一只苹果，不知道被哪个王八羔子暗中咬了一口。前一秒还鲜嫩多汁，后一
                    秒就以肉眼可见的速度「唰」地枯萎。眼袋、黑眼圈、法令纹，发腮、垮脸、白头发……🥀血浆蛋白：一种衰老相关指标这也是近几年围
                    绕「断崖式衰老」最集中的讨论：花期结束，你将迎接一种「可视化的变丑」。图片来
                  </div>
                </div>
              </div>
              <div class="link-line">
                <a href="https://dxy.com/article/197104" target="_blank"
                   class="link-line-title common-text-link"
                   rel="">只换床单不做这件事，你的床永远是脏的</a></div>
              <div class="link-line">
                <a href="https://dxy.com/article/197221" target="_blank"
                   class="link-line-title common-text-link" rel="">以为通便，实则让你便秘的6个行为</a>
              </div>
              <div class="link-line">
                <a href="https://dxy.com/article/197487" target="_blank" class="link-line-title common-text-link"
                   rel="">一个会导致口臭的习惯，很多人都有</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer class="footer">
        <div id="j-dxy-bottom">
          <ul class="bottom-link">
            <li class="bottom-link-item">
              <a target="_blank" href="http://localhost:8080/about" rel="nofollow">版权声明</a>
            </li>
            <li class="bottom-link-item">
              <a target="_blank" href="http://localhost:8080/about">作者编委</a>
            </li>
            <li class="bottom-link-item">
              <a target="_blank" href="http://localhost:8080/about">丁香医生</a>
            </li>
            <li class="bottom-link-item">
              <a href="http://localhost:8080/about" rel="nofollow">投稿邮箱</a>
            </li>
            <li class="bottom-link-item"><span>客服电话：0000-0000000</span></li>
          </ul>
        </div>
      </footer>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  import { ElMessage } from 'element-plus'
  import {jwtDecode} from 'jwt-decode'

//   import {Search} from "@element-plus/icons-vue";

const username = ref('')
const avatar = ref('')


const fetchUserInfo =  () => { 
    const token = localStorage.getItem('token');
    if (token) {
        const payload = ref(jwtDecode(token));
     
        username.value = payload.value.username;
        avatar.value = payload.value.headimg;
        console.log(avatar.value);
    }
    
}


const logout = () => {
    username.value = null;
    avatar.value = null;
    clearTokenInBrowser(); // 假设这个函数清除token
};

const clearTokenInBrowser = () => {
    localStorage.removeItem('token');
};
  
let daparlist = ref([])

const getdapar = () => {
  axios.get('http://127.0.0.1:8000/depart/depar/').then(res =>{
    
    daparlist.value=res.data
    
  })
}

  
  let state = reactive({
    activeTab: 'dz',
    nanxing2: 'nanxing2',
    nvxing2: 'nvxing2',
    as: "femaleHealth"
  })

  let info=ref([])
const news=()=>{
  axios.get("http://127.0.0.1:8000/sub/catelist/")
  .then(res=>{
    
      
      info.value=res.data.data
      })
      }


let indo=ref([])
const newsliat=(sid)=>{
  axios.get(`http://127.0.0.1:8000/sub/cateall/?sid=${sid}`)
  .then(res=>{
 

      indo.value=res.data.data
      })
    }
//另一个
    let ino=ref([])
const newss=()=>{
  axios.get("http://127.0.0.1:8000/sub/catetowshow/")
  .then(res=>{
 
      
      ino.value=res.data.data
      })
      }


let inno=ref([])
const catelist=(sid)=>{
  axios.get(`http://127.0.0.1:8000/sub/catealltoow/?sid=${sid}`)
  .then(res=>{
    

      inno.value=res.data.data
      })
    }


  onMounted(() =>{
    fetchUserInfo();
    newss()
    news()
    newsliat(1)
    catelist(1)
    getdapar()
  })


  </script>
  
  <style>

  /* .button-ali{

  } */


  .login-header-spar{
    display: flex;
    margin-right: 20px;
    align-items: center;
  }
  .login-header-spar span{
    
    margin-left: 20px;
    
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .login-continer {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #e8e9eb;
  }
  
  .login-continer .login-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 60px;
    margin-right: 20px;
    box-sizing: border-box;
  }
  
  .login-continer .login-header .dot {
    position: relative;
  }
  
  .login-continer .login-header .download, .login-continer .login-header .follow {
    font-size: 13px;
    line-height: 16px;
    color: #252a33;
  }
  
  .login-continer .login-header .download-icon, .login-continer .login-header .follow-icon, .login-continer .login-header .user-icon {
    height: 16px;
    width: 16px;
    margin-right: 8px;
    color: #4b5566;
  }
  
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
  }
  
  .login-continer .login-header .dot:after {
    top: 6px;
    right: -12px;
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    background-color: #828993;
    border-radius: 50%;
  }
  
  .login-continer .login-header .identify {
    font-size: 13px;
    line-height: 16px;
    color: #00c792;
    margin-right: 30px;
    margin-left: 20px;
    align-items: center;
    font-weight: 700;
  }
  
  .login-continer .login-header .before-login {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    color: #252a33;
  }
  
  .login-continer .login-header .dot {
    position: relative;
  }
  
  .login-continer .login-header .before-login-login {
    display: flex;
    margin-right: 20px;
    align-items: center;
  }
  
  .login-continer .login-header .before-login > * {
    margin-right: 8px;
  }
  
  .login-continer .login-header .download-icon, .login-continer .login-header .follow-icon, .login-continer .login-header .user-icon {
    height: 16px;
    width: 16px;
    margin-right: 8px;
    color: #4b5566;
  }
  
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
  }
  
  .login-continer .login-header .dot:after {
    top: 6px;
    right: -12px;
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    background-color: #828993;
    border-radius: 50%;
  }
  
  .login-continer .login-header .before-login > :last-child {
    margin-right: 0;
  }
  
  .login-continer .login-header .before-login > * {
    margin-right: 8px;
  }
  
  .home-header {
    width: 100%;
    margin-bottom: 28px;
    height: 558px;
  }
  
  .home-header-container {
    background: url(https://img1.dxycdn.com/2021/0106/853/8888368778279227543-22.png) no-repeat 100% 100%;
    background-size: cover;
    height: 506px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
  }
  
  .home-header .home-logo {
    width: 180px;
    height: 49px;
    margin-top: 80px;
  }
  
  .home-header .home-logo .logo-icon {
    width: 180px;
    height: 49px;
    display: block;
    background: url(https://img1.dxycdn.com/t/s22/2023/1020/192/0844255084588925171.png) no-repeat 50%;
    background-size: cover;
  }
  
  .home-header .search-input-container {
    margin-top: 31px;
  }
  
  .search-input-container {
    box-shadow: 0 2px 1px 0 hsla(215, 9%, 63%, .05);
    display: flex;
    align-items: center;
    position: relative;
    width: 680px;
    height: 46px;
    background-color: #fff;
  }
  
  .search-input-container .search-icon {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .icon-ic_search {
    position: absolute;
    width: 18px;
    height: 18px;
    color: #c5c8d1;
    margin-left: 16px;
  }
  
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
  }
  
  .search-input-container .search-input {
    display: inline-block;
    flex: 1 1;
    text-indent: 42px;
    border: 1px solid #e8e9eb;
    font-size: 1.4rem;
    height: 44px;
    line-height: 44px;
    color: #444c57;
  }
  
  .search-input-container .search-input-button {
    width: 128px;
    height: 46px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00c792;
    font-weight: 500;
    line-height: 16px;
    color: #fff;
  }
  
  button, input, textarea {
    border: none;
    outline: none;
  }
  
  .home-banner {
    display: flex;
    max-width: 1180px;
    width: 100%;
    margin-top: 80px;
  }
  
  .home-banner .banner-left {
    width: 226px;
    min-width: 226px;
    height: 252px;
    border-radius: 4px;
    box-shadow: 0 6px 12px 0 hsla(215, 9%, 63%, .2);
    background-image: url(https://img1.dxycdn.com/2020/0821/847/0477797599034961343-22.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 36px 20px;
    box-sizing: border-box;
    background-color: #fff;
    display: block;
  }
  
  .home-banner .banner-left-title {
    top: 36px;
    font-size: 28px;
    font-weight: 500;
    line-height: 32px;
    color: #252a33;
  }
  
  .home-banner .banner-left-sub {
    font-size: 12px;
    line-height: 16px;
    color: #252a33;
    margin-top: 8px;
  }
  
  .home-banner .banner-right {
    display: flex;
    flex-flow: row wrap;
    min-width: 942px;
  }
  
  .home-banner .banner-right-item {
    display: flex;
    padding: 36px 20px;
    align-items: center;
    width: 226px;
    height: 120px;
    border-radius: 4px;
    box-shadow: 0 6px 12px 0 hsla(215, 9%, 63%, .2);
    background-color: #fff;
    box-sizing: border-box;
    margin-left: 12px;
    margin-bottom: 12px;
    justify-content: space-between;
  }
  
  .home-banner .banner-right-item .item-info-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: #252a33;
  }
  
  .home-banner .banner-right-item .item-info-sub {
    font-size: 12px;
    line-height: 16px;
    color: #252a33;
    margin-top: 8px;
  }
  
  .home-banner .banner-right-item .item-img {
    width: 44px;
    height: 44px;
    display: block;
  }
  
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
  }
  
  .active {
    color: #f0892e;
    font-size: 29px;
    font-weight: bold;
  }
  
  .home-baike {
    width: 100%;
    max-width: 1180px;
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 20px;
  }
  
  .home-baike-tabs {
    display: flex;
    flex-flow: row nowrap;
    height: 80px;
  }
  
  .home-baike-tab.active {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: #00c792;
    background: #fff;
  }
  
  .home-baike-tab {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 1 1;
    font-size: 20px;
    line-height: 24px;
    color: #6c7480;
    background-color: #fafafa;
  }
  
  .home-baike-tab .tab-image {
    height: 24px;
    width: 24px;
    margin-right: 8px;
  }
  
  .home-baike-body {
    background: #fff;
  }
  
  .home-baike-body-categorys {
    display: flex;
    flex-flow: row wrap;
  }
  
  .home-baike-body-categorys .section-filter-box-common {
    padding-bottom: 0;
  }
  
  .section-filter-box-common {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    padding: 28px 0 16px;
    margin: 0 30px;
  }
  
  .section-filter-box-wrap {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1;
    min-height: 38px;
  }
  
  .tag-button.active, .tag-button:hover {
    background-color: #dadcde;
    color: #5b626b;
    font-weight: 500;
    
  }
  
  .tag-button {
    width: 100px;
    border-radius: 4px;
    background-color: #f2f3f5;
    cursor: pointer;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    font-size: 13px;
    line-height: 18px;
    color: #5b626b;
    text-align: center;
    margin-right: 40px;
    margin-bottom: 30px;
    padding: 4px 0;
    box-sizing: border-box;
    height: 26px;
  }
  
  .home-baike-body-tags {
    
    
    display: flex;
    flex-flow: row wrap;
    padding: 28px 30px 8px;
    height: 180px; /* 只需要一个 height 属性，选择你需要的值 */
    box-sizing: border-box;
  }

  .home-baike-body-tags > * {
    
    
    width: 150px; /* 给每个子元素指定相同的宽度 */
    box-sizing: border-box; 
  }


  
  .home-baike-button-ali{
    display: block;
    position: relative;
    list-style-type: none;
  
    color:#252a33
  }

  .home-baike-button-ali li{
    width: 100%;
    min-width: 150px;
    margin-left: 23px;
    padding-left: 20px;
    padding-bottom: 50px;
    padding-top: 15px;
    text-align: left;
    list-style: none;
    min-width: 70px;
    margin-bottom: 10px;
    position:relative;

  }

  .dotted-list-item::before {
    content: "·";
    width: 4px;
    height: 4px;
    background-color: #d0d3d9;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 0px;
    margin-right: 5px;
    transform: translate(-100%, 200%);
  }

  
  .home-baike-body-tags .link-line {
    width: 140px;
    font-size: 14px;
    line-height: 16px;
    color: #252a33;
    margin-bottom: 32px;
  }
  
  .link-line {
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  
  .link-line-title {
    display: block;
    position: relative;
    padding-left: 8px;
    margin-left: 4px;
    color: #252a33;
  }
  
  .link-line-title:before {
    content: "";
    width: 4px;
    height: 4px;
    background-color: #d0d3d9;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 0;
    transform: translate(-100%, 200%);
  }
  
  /*开始*/
  .doctor-module {
    background: #fff;
    width: 1180px;
    max-width: 1180px;
    margin-bottom: 20px;
    border-radius: 4px;
    margin-top: 100px;
  }
  
  .home-tabs {
    display: flex;
    padding: 28px 30px;
    justify-content: space-between;
    border-bottom: 1px solid #e8e9eb;
  }
  
  .home-tabs-left {
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    max-width: 1000px;
    display: flex;
  }
  
  .home-tabs-left .tab-item.active {
    color: #00c792;
    font-weight: 500;
  }
  
  .home-tabs-left .tab-item {
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #252a33;
    margin-right: 52px;
    white-space: nowrap;
  }
  
  .home-tabs-right {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
  }
  
  .home-tabs-right .right-title {
    font-size: 16px;
    line-height: 20px;
    color: #00c792;
  }
  
  .doctor-module .doctor-container {
    padding: 40px 30px;
    display: flex;
  }
  
  .doctor-card {
    display: flex;
    max-width: 270px;
    flex: 1 1;
    flex-direction: column;
    padding: 32px 20px;
    border: 1px solid #e8e9eb;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    align-items: center;
  }
  
  .doctor-card-avatar, .doctor-card-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, .05);
  }
  
  img {
    max-width: 100%;
  }
  
  .high-light {
    font-size: 16px;
    color: #444c57;
  }
  
  .doctor-card-name-title {
    font-size: 16px;
    font-weight: 500;
    color: #444c57;
    margin-top: 16px;
    line-height: 1.25;
  }
  
  .doctor-card-hospital {
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  
  .doctor-card-hospital, .doctor-card-section {
    font-size: 13px;
    color: #828993;
    line-height: 1.23;
    margin-top: 8px;
    max-width: 80%;
  }
  
  .doctor-card-hospital, .doctor-card-section {
    font-size: 13px;
    color: #828993;
    line-height: 1.23;
    margin-top: 8px;
    max-width: 80%;
  }
  
  .doctor-card-data {
    font-size: 1.3rem;
    line-height: 1.23;
    color: #828993;
    margin-top: 16px;
    display: flex;
  }
  
  .doctor-card-data-star {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  
  .icon-ic_rating {
    width: 14px;
    height: 13px;
    color: #ffb54c;
  }
  
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
  }
  
  .doctor-card-data-star-text {
    margin-left: 4px;
    color: #ffb54c;
  }
  
  .doctor-card-data-star:after {
    content: "";
    display: inline-flex;
    width: 1px;
    height: 12px;
    background-color: #e8e9eb;
    margin: 0 20px;
  }
  
  .doctor-card-data-reply {
    display: inline-flex;
  }
  
  .doctor-card-ask {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .doctor-card-desc {
    font-size: 13px;
    color: #818993;
    margin-top: 24px;
    text-align: center;
    min-height: 44px;
    line-height: 1.54;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  
  .doctor-card-btn.btn {
    width: 120px;
    height: 38px;
    min-height: 38px;
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: 500;
    margin-top: 24px;
    color: #fff;
  }
  
  .common-button-link {
    position: relative;
  }
  
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #00c792;
  }
  
  button, input, textarea {
    border: none;
    outline: none;
  }
  
  .doctor-module .doctor-container .doctor-card {
    margin-right: 20px;
  }
  
  .doctor-card {
    display: flex;
    max-width: 270px;
    flex: 1 1;
    flex-direction: column;
    padding: 32px 20px;
    border: 1px solid #e8e9eb;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    align-items: center;
  }
  
  .doctor-module .doctor-container .doctor-card:last-child {
    margin-right: 0;
  }
  
  .doctor-module .doctor-container .doctor-card {
    margin-right: 20px;
  }
  
  .doctor-card {
    display: flex;
    max-width: 270px;
    flex: 1 1;
    flex-direction: column;
    padding: 32px 20px;
    border: 1px solid #e8e9eb;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    align-items: center;
  }
  
  .content {
    display: flex;
    flex-flow: column nowrap;
    max-width: 1180px;
    width: 100%;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    margin: 0 auto 20px;
    padding: 28px 30px;
  }
  
  .content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
  }
  
  .content-title-text {
    font-size: 2rem;
    color: #252a33;
    font-weight: 500;
    line-height: 24px;
  }
  
  .content-title-more {
    font-size: 1.6rem;
    color: #00c792;
  }
  
  .question-module {
    display: flex;
    flex-flow: row;
    margin-bottom: 12px;
    justify-content: space-around;
  }
  
  .question-card {
    border-radius: 4px;
    border: 1px solid #e8e9eb;
    background-color: #fff;
    display: block;
    flex: 1 1;
  }
  
  .dialog-ask {
    display: flex;
    padding: 24px 20px;
    min-height: 120px;
    box-sizing: border-box;
  }
  
  .common-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .common-avatar-img {
    display: block;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  
  .dialog-ask-content {
    flex: 1 1;
    font-size: 16px;
    line-height: 24px;
    color: #444c57;
    margin-left: 12px;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  
  .high-light {
    font-size: 16px;
    color: #444c57;
  }
  
  .dialog-answer {
    display: flex;
    padding: 24px 20px;
    background: hsla(0, 0%, 96%, .4);
  }
  
  .dialog-answer-avatar {
    margin-right: 12px;
  }
  
  .common-avatar-border {
    border: 1px solid rgba(0, 0, 0, .05);
  }
  
  .common-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .common-avatar-img {
    display: block;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  
  .dialog-answer-body .dialog-doctor-info {
    font-size: 13px;
    line-height: 16px;
    color: #828993;
    margin-bottom: 12px;
    align-items: center;
    display: flex;
  }
  
  .dialog-answer-body .dialog-doctor-info .doctor-name {
    font-size: 16px;
    line-height: 20px;
    color: #5b626b;
    margin-right: 8px;
  }
  
  .high-light {
    font-size: 16px;
    color: #444c57;
  }
  
  .dialog-answer-body .dialog-doctor-info .doctor-info {
    margin-right: 4px;
  }
  
  .dialog-answer-body .dialog-doctor-info .doctor-info {
    margin-right: 4px;
  }
  
  .dialog-answer-body .dialog-content {
    font-size: 16px;
    line-height: 24px;
    color: #444c57;
    margin-bottom: 12px;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  
  .dialog-answer-body .dialog-num {
    font-size: 12px;
    line-height: 16px;
    color: #ffb54c;
  }
  
  .question-module .question-card:nth-child(2n) {
    margin-left: 20px;
  }
  
  .question-card {
    border-radius: 4px;
    border: 1px solid #e8e9eb;
    background-color: #fff;
    display: block;
    flex: 1 1;
  }
  
  .dialog-ask {
    display: flex;
    padding: 24px 20px;
    min-height: 120px;
    box-sizing: border-box;
  }
  
  .common-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .common-avatar-img {
    display: block;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  
  .content {
    display: flex;
    flex-flow: column nowrap;
    max-width: 1180px;
    width: 100%;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    margin: 0 auto 20px;
    padding: 28px 30px;
  }
  
  .content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
  }
  
  .content-title-text {
    font-size: 2rem;
    color: #252a33;
    font-weight: 500;
    line-height: 24px;
  }
  
  .content-title-more {
    font-size: 1.6rem;
    color: #00c792;
  }
  
  .articles-module {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-bottom: 12px;
  }
  
  .articles-module .home-article-item {
    flex: 1 1;
    margin-right: 38px;
  }
  
  .article-card {
    display: flex;
  }
  
  .article-card .article-card-cover {
    width: 100px;
    height: 100px;
    min-width: 100px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .05);
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .article-card .article-card-cover-img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
  }
  
  img {
    max-width: 100%;
  }
  
  .article-card .article-card-body {
    margin-left: 12px;
  }
  
  .article-card .article-card-body .article-title {
    display: block;
  }
  
  .article-card .article-card-body .body-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #252a33;
    margin-bottom: 16px;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  
  .high-light {
    font-size: 16px;
    color: #444c57;
  }
  
  .article-card .article-card-body .body-content {
    font-size: 14px;
    line-height: 20px;
    color: #828993;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  
  .articles-module .home-article-item .link-line:nth-child(2) {
    margin-top: 24px;
  }
  
  .articles-module .home-article-item .link-line {
    margin-top: 16px;
  }
  
  .link-line {
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  
  .link-line-title {
    display: block;
    position: relative;
    padding-left: 8px;
    margin-left: 4px;
    color: #252a33;
  }
  
  .link-line-title:before {
    content: "";
    width: 4px;
    height: 4px;
    background-color: #d0d3d9;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 0;
    transform: translate(-100%, 200%);
  }
  
  .articles-module .home-article-item .link-line {
    margin-top: 16px;
  }
  
  .articles-module .home-article-item:nth-child(2n) {
    margin-left: 20px;
  }
  
  .articles-module .home-article-item {
    flex: 1 1;
    margin-right: 38px;
  }
  
  .article-card {
    display: flex;
  }
  
  .article-card .article-card-cover {
    width: 100px;
    height: 100px;
    min-width: 100px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .05);
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .article-card .article-card-cover-img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
  }
  
  .article-card .article-card-body {
    margin-left: 12px;
  }
  
  .article-card .article-card-body .article-title {
    display: block;
  }
  
  .article-card .article-card-body .body-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #252a33;
    margin-bottom: 16px;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  
  .article-card .article-card-body .body-content {
    font-size: 14px;
    line-height: 20px;
    color: #828993;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }
  
  .articles-module .home-article-item .link-line:nth-child(2) {
    margin-top: 24px;
  }
  
  .articles-module .home-article-item .link-line {
    margin-top: 16px;
  }
  
  .back-top {
    display: inline-block;
    position: fixed;
    right: 5%;
    bottom: 3%;
    box-sizing: border-box;
    width: 54px;
    height: 54px;
    background-color: #00c792;
    text-align: center;
    padding-top: 18px;
  }
  
  .icon-ic_arrow_up {
    color: #fff;
    font-size: 1.8rem;
  }
  
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
  }
  
  #j-dxy-bottom .bottom-link {
    margin: 20px 0 0 0;
  }
  
  #j-dxy-bottom .bottom-link {
    display: flex;
    justify-content: center;
    transition: 0.3s all;
    list-style: none;
    color: #aaa;
  }
  
  li, ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  #j-dxy-bottom .bottom-link-item a, #j-dxy-bottom .bottom-link-item span {
    color: #99a0aa;
    font-size: 13px;
    line-height: 32px;
    font-family: MicrosoftYaHeiUI;
  }
  
  #j-dxy-bottom .bottom-link-item {
    cursor: pointer;
  }
  
  #j-dxy-bottom .bottom-link-item:not(:last-child) a:after {
    content: "";
    display: inline-flex;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #c5c8d1;
    margin: 0 15px;
  }
  
  </style>
  